<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        /*
            径向渐变
                background-image: radial-gradient(形状 大小 at 中心点, 颜色1 位置1, 颜色2 位置2, ... , 颜色n 位置n);
                中心点: 50% 50%;
                形状: circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
                大小: closest-side    farthest-side   closest-corner  farthest-corner;


        */
        div{
            width: 400px;
            height: 200px;
            
            background-image: radial-gradient(circle closest-side at 20% 20%, red, blue);
            background-image: radial-gradient(circle closest-side, red, yellow 10%, blue 20%);
            background-image: repeating-radial-gradient(circle closest-side, red, yellow 10%, blue 20%);

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>